<template>
    <div class="search-div">
        
          

             <!--- 线索最新跟踪记录数据 -->
                <el-table v-if="list" :data="list" style="width: 100%">
                  
                    <el-table-column fixed prop="clueId" label="线索ID" width="80" />
                    
                    <el-table-column prop="startTime" label="开始时间" width="180" />
                    <el-table-column prop="followupTime" label="跟进时间" width="150" />
                    <el-table-column prop="followupDuration" label="跟进时长（分钟）" width="80" />
                    <el-table-column prop="followupMethod" label="跟进方式" width="80" />
                    <el-table-column prop="trackingRecord" label="跟踪情况记录" width="180" />
                    <el-table-column prop="intentLevel" label="意向程度"  width="80" :formatter="intentLevelstate"/>
                    <el-table-column prop="trackingStatus" label="跟踪状态" width="80" :formatter="trackState"/>
                    <el-table-column prop="note" label="备注" />

                    
                    <el-table-column fixed="right" label="操作" align="center" width="300" #default="scope">
                    <el-button type="primary" size="small" @click="clueDetails(scope.row)" >
                        线索详情
                    </el-button>
                    <el-button type="warning" size="small" @click="queryClueTrackRecord1(scope.row)">
                        跟进记录
                    </el-button>

                    </el-table-column>
                </el-table>

   
                <!-- 线索跟踪记录的对话框  -->
  <!-- 增加的对话框 -->
  <el-dialog
    class="customWidth"
    v-model="dialogTableVisible"
    title="线索跟踪记录"
  >
    <el-table :data="clueTrackingList" stripe style="width: 1000" :height="400">
      <!-- <el-table-column prop="clueTrackingId" label="跟踪情况id" width="100">
      </el-table-column> -->
      <el-table-column prop="clueId" label="线索id" width="100">
      </el-table-column>
      <el-table-column prop="salespersonId" label="销售id" width="100">
      </el-table-column>
      <el-table-column prop="startTime" label="开始时间" width="180"> </el-table-column>
      <el-table-column prop="followupTime" label="跟进时间" width="100">
      </el-table-column>
      <el-table-column prop="followupDuration" label="跟进时长" width="100">
      </el-table-column>
      <el-table-column prop="followupMethod" label="跟进方式" width="100">
      </el-table-column>
      <el-table-column prop="trackingRecord" label="跟踪情况记录" width="100">
      </el-table-column>

      <el-table-column prop="intentLevel" label="意向程度"  width="80" :formatter="intentLevelstate"/>
                    <el-table-column prop="trackingStatus" label="跟踪状态" width="80" :formatter="trackState"/>
      <el-table-column prop="note" label="备注" width="100"> </el-table-column>

     
    </el-table>
    
  </el-dialog>

  <!-- 跟踪记录的新增 -->
  <el-dialog v-model="FormVisible" title="跟进记录" >

<el-form label-width="120px">

  <el-form-item label="跟进时间" :label-width="formLabelWidth">
    <el-input v-model="clueTrackingFrom.followupTime" />
  </el-form-item>

  <el-form-item label="跟进时长" :label-width="formLabelWidth">
    <el-input v-model="clueTrackingFrom.followupDuration" />
  </el-form-item>

  <el-form-item label="跟进方式" :label-width="formLabelWidth">
    <el-select
      v-model="clueTrackingFrom.followupMethod"
      placeholder="请选择方式"
    >
      <el-option label="电话" value="电话" />
      <el-option label="微信" value="微信" />
      <el-option label="邮箱" value="邮箱" />
    </el-select>
  </el-form-item>

  <el-form-item label="跟踪情况记录" :label-width="formLabelWidth">
    <el-input v-model="clueTrackingFrom.trackingRecord" type="textarea" />
  </el-form-item>

  <el-form-item
    label="意向程度"
    :label-width="formLabelWidth"
    
  >
    <el-select
      v-model="clueTrackingFrom.intentLevel"
      placeholder="请选择程度"
    >
      <el-option label="无意向" value="0" />
      <el-option label="一般" value="1" />
      <el-option label="有意向" value="2" />
      <el-option label="未确定" value="3" />
    </el-select>
  </el-form-item>

  <el-form-item
    label="跟踪状态"
    :label-width="formLabelWidth"
   
  >
    <el-select
      v-model="clueTrackingFrom.trackingStatus"
      placeholder="请选择状态"
    >
      <el-option label="未处理" value="0" />
      <el-option label="已联系" value="1" />
      <el-option label="已放弃" value="2" />
      <el-option label="已成交" value="3" />
      <el-option label="已轮转" value="4" />
    </el-select>
  </el-form-item>

  <el-form-item label="备注" :label-width="formLabelWidth">
    <el-input v-model="clueTrackingFrom.note" type="textarea" />
  </el-form-item>
</el-form>

<template #footer>
  <span class="dialog-footer">
    <el-button @click="FormVisible = false">取消</el-button>
    <el-button type="primar" @click="onSubmit"> 确定 </el-button>
  </span>
</template>

</el-dialog>
<!-- 线索跟踪记录的增加和修改表单 -->


                

                <!-- 线索详情 -->
                <el-dialog v-model="dialogClueVisible" title="线索详情" width="40%">
                    <el-form label-width="120px">
                        <el-form-item label="用户名姓名">
                            <el-input :readonly="true" v-model="ClueDetail.customerName"/>
                        </el-form-item>
                       
                        <el-form-item label="性别" >
                            <el-input :readonly="true" v-model="ClueDetail.gender"/>
                        </el-form-item>
                        <el-form-item label="年龄">
                            <el-input :readonly="true" v-model="ClueDetail.age"/>
                        </el-form-item>
                        <el-form-item label="联系电话" >
                            <el-input :readonly="true" v-model="ClueDetail.contactNumber"/>
                        </el-form-item>
                        <el-form-item label="学历" >
                            <el-input :readonly="true" v-model="ClueDetail.education"/>
                        </el-form-item>
                        <el-form-item label="职业" >
                            <el-input :readonly="true" v-model="ClueDetail.occupation"/>
                        </el-form-item>

                        <el-form-item label="省份" >
                            <el-input :readonly="true" v-model="ClueDetail.province"/>
                        </el-form-item>
                        <el-form-item label="城市">
                            <el-input :readonly="true" v-model="ClueDetail.city"/>
                        </el-form-item>
                        <el-form-item label="邮箱" >
                            <el-input :readonly="true" v-model="ClueDetail.email"/>
                        </el-form-item>
                        <el-form-item label="旅行人数">
                            <el-input :readonly="true" v-model="ClueDetail.travelersCount"/>
                        </el-form-item>
                        <el-form-item label="出行类型">
                            <el-input :readonly="true" v-model="ClueDetail.travelType"/>
                        </el-form-item>
                        <el-form-item label="意向产品">
                            <el-input :readonly="true" v-model="ClueDetail.contactNumber"/>
                        </el-form-item>
                        <el-form-item label="线索来源">
                            <el-input :readonly="true" v-model="ClueDetail.clueSource"/>
                        </el-form-item>
                        <el-form-item label="备注">
                            <el-input :readonly="true"  v-model="ClueDetail.note"/>
                        </el-form-item>

                    </el-form>
                </el-dialog>




            <!--分页条-->
            <el-pagination
                        v-model:current-page="pageParams.page"
                        v-model:page-size="pageParams.limit"
                        :page-sizes="[10, 20, 50, 100]"
                        @size-change="fetchData"
                        @current-change="fetchData"
                        layout="total, sizes, prev, pager, next"
                        :total="total"
            />
  </div>

</template>

<script setup>

import { ref,onMounted } from "vue";
import {updateTrackRecord,addTrackRecord,queryClueTrackRecord,GetNewClueInfo,FindClueById,GetMyTranferClueInfo} from '../../api/Export';
import { ElMessage, ElMessageBox } from 'element-plus'

//定义数据模型

////////////////////////////角色列表


// 表格数据模型
const list = ref([]);
let total = ref(0) //总记录数

const pageParamsForm = {
    page: 1, //当前页
    limit: 2 //每页记录数
}

const pageParams = ref(pageParamsForm)

//钩子方法
onMounted(() => {
    fetchData()
} )

const salespersonId = 1

//操作方法： 列表方法 搜索方法
const fetchData = async() => {
    const {data} = await GetMyTranferClueInfo( pageParams.value.page, pageParams.value.limit,salespersonId)
    list.value = data.list
    total.value = data.total
}



//线索详细信息
//表格存储的对象格式

//////////////////////////////////线索跟踪记录

 //////////////////////////////////////////////////线索跟踪记录
 const TrackClueForm = {
      clueTrackingId:"",
      clueId:"",
      salespersonId:"",
      startTime:"",
      followupTime:"",
      followupDuration:"",
      followupMethod:"",
      trackingRecord:"",
      intentLevel:"",
      trackingStatus:"",
      note:"",
    };
const clueTracking = ref(TrackClueForm);

/////////////////////////////跟进记录

const clueTrackingList = ref([])

const dialogTableVisible = ref(false)

let clueFromId = ref(0);

const queryClueTrackRecord1 = async row => { 
   
    const { data } = await queryClueTrackRecord(salespersonId, row.clueId);
    clueTrackingList.value = data
    dialogTableVisible.value = true
    clueFromId = row.clueId
    console.log(clueFromId);
}


// ////////////////////////////// 

const clueTrackingFrom = ref(TrackClueForm);

const FormVisible = ref(false)

const handleAdd = () => {
    clueTrackingFrom.value = {}
    FormVisible.value = true
}

const onSubmit = async()=>{

   

    
    if(clueTrackingFrom.value.clueId){

        console.log("编辑线索");
        const {data} = await updateTrackRecord(clueTrackingFrom.value)
        console.log(data);
        FormVisible.value = false;

        queryClueTrackRecord1(clueTrackingFrom.value)
    }else{
        clueTrackingFrom.value.clueId = clueFromId
        clueTrackingFrom.value.salespersonId = salespersonId
        console.log(clueTrackingFrom.value);
        const { data } = await addTrackRecord(clueTrackingFrom.value);
        console.log(data);
        FormVisible.value = false;
        queryClueTrackRecord1( clueTrackingFrom.value)
    }
    
}

const handleEdit = (row) =>{
    clueTrackingFrom.value = {}
    FormVisible.value = true
    clueTrackingFrom.value = {...row};
}
//////////////////////////////线索详细

const defaultClueFrom = {
    clueId:"",
    idNumber: "",
    customerName:"",
    gender:"",
    age:"",
    education:"",
    occupation:"",
    province:"",
    city:"",
    contactNumber:"",
    email:"",
    travelersCount:"",
    travelType:"",
    intentionalProductId:"",
    createdTime:"",
    clueSource:"",
    note:"",
};

const ClueDetail = ref(defaultClueFrom)

const dialogClueVisible = ref(false)

const clueDetails = async (row) => {

    const data = await FindClueById(row.clueId);
    ClueDetail.value = data.data
    
    console.log(data);
    dialogClueVisible.value = true
}




const trackState = (row) => {
  switch (row.trackingStatus) {
    case 0:
      return '未处理';
    case 1:
      return '已联系';
    case 2:
      return '已放弃';
    case 3:
      return '已成交';
    case 4:
      return '已轮转';
    default:
      return '未知状态';
  }
};

const intentLevelstate = (row) => {
  switch (row.intentLevel) {
    case 0:
      return '无意向';
    case 1:
      return '一般';
    case 2:
      return '有意向';
    case 3:
      return '未确定';
    default:
      return '未知状态';
  }
};



</script>

<style scoped>

.search-div {
  margin-bottom: 10px;
  padding: 10px;
  border: 1px solid #ebeef5;
  border-radius: 3px;
  background-color: #fff;
}

.tools-div {
  margin: 10px 0;
  padding: 10px;
  border: 1px solid #ebeef5;
  border-radius: 3px;
  background-color: #fff;
}

</style>